/* eslint-disable array-callback-return */
import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Divider, Spin, Row, Col } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import queryString from 'query-string';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';

const { Description } = DescriptionList;
@connect(({ busicont, loading, publicdata }) => ({
  loading: loading.models.busicont || loading.models.publicdata,
  dictCode: publicdata.dictCode,
  contInfo: busicont.contInfo, // 客户合同回显数据
}))
@Form.create()
class Details extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 字典列表：服务类型、顺延方式、付款方式、收费规则、客户付款周期、资料收取方式、发票交付类型、发票交付方式、发票方式、发票类型、拆分规则、付款日期选择方式、产品类型、附件类型
      dictList: [
        'SER_TYPE',
        'POS_WAY',
        'PAY_WAY',
        'FEE_RULE',
        'CUST_PAY_PERIOD',
        'SEND_MAT_COLT_WAY',
        'INV_DELV_TYPE',
        'INV_DELV_WAY',
        'INV_CATE',
        'INV_TYPE',
        'SPLIT_RULES',
        'SELECTION_TYPE',
        'PD_CATE',
        'AFFIX_TYPE',
        'CONT_SPOT',
      ],
    };
  }

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { dictList } = this.state;
    const { contId } = queryString.parse(location.search);
    const { contHisId } = queryString.parse(location.search);
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: dictList,
    }).then(data => {
      const sortNumber = (a, b) => a.itemCode - b.itemCode;
      dictList.map(dict => {
        this.setState({ [dict]: data[dict].sort(sortNumber) });
      });
      this.getList(contId, contHisId);
    });
  }

  // 获取数据
  getList = (contId, contHisId) => {
    if (contId) {
      const { dispatch, dictCode } = this.props;
      dispatch({
        type: 'busicont/getHistoryDetail',
        payload: {
          contId: contHisId,
        },
      }).then(response => {
        const contInfo = response.data || {};
        dispatch({
          type: 'busicont/matchDictName',
          payload: {
            contInfo,
            dictCode,
          },
        });
      });
    } else {
      router.push('/salemanage/busicont/index');
    }
  };

  render() {
    const { SPLIT_RULES, CONT_SPOT } = this.state;
    const { loading, contInfo } = this.props;
    return (
      <Spin tip="Loading..." spinning={loading}>
        <PageHeaderWrapper>
          <Card>
            <DescriptionList
              title={
                <span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                  商务合同
                </span>
              }
            >
              <Description term="客户名称">{contInfo.custName || '--'}</Description>
              <Description term="合同名称">{contInfo.contName || '--'}</Description>
              <Description term="服务类型">{contInfo.serTypeName || '--'}</Description>
              <Description term="签约日期">
                {moment(contInfo.signDate).format('YYYY-MM-DD') || '--'}
              </Description>
              <Description term="签署部门">{contInfo.signDepName || '--'}</Description>
              <Description term="签署人">{contInfo.signName || '--'}</Description>
              <Description term="合同日期">
                {moment(contInfo.beginDate).format('YYYY-MM-DD') || '--'} ~{' '}
                {moment(contInfo.endDate).format('YYYY-MM-DD') || '--'}
              </Description>
              <Description term="顺延方式">
                {contInfo.posWayName} {contInfo.posDate ? `${contInfo.posDate}月` : ''}
              </Description>
            </DescriptionList>
            {/* 合同约定 */}
            <Divider />
            <DescriptionList
              title={
                <span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                  合同约定
                </span>
              }
            >
              <Description term="付款方式">
                {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.payWayName) || '--'}
              </Description>
              <Description term="社保收费规则">
                {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.insFeeRuleName) || '--'}
              </Description>
              <Description term="公积金收费规则">
                {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.accuFeeRuleName) || '--'}
              </Description>
              <Description term="账单交付日">
                {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.billDelvDay) || '--'}
              </Description>
              <Description term="客服付款周期">
                {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.payPeriodName) || '--'}
              </Description>
              <Description term="发票邮寄周期">
                {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.invPeriodName) || '--'}
              </Description>
              <Description term="预付款">
                {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.advancePrice) || '--'}
              </Description>
              <Description term="最低收费">
                {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.lowestPrice) || '--'}
              </Description>
              <Description term="工资发放日">
                每月{(contInfo.crmCustContConfig && contInfo.crmCustContConfig.payoutDay) || '--'}日
              </Description>
              <Description term="资料收取">
                {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.matColtWayName) || '--'}
              </Description>
              <Description term="发票交付">
                {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.invDelvTypeName) || null}
                &nbsp;
                {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.invCateName) || null}
                &nbsp;
                {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.invTypeName) || null}
                &nbsp;
                {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.invDelvWayName) || '--'}
              </Description>
              <Description term="账单拆分规则">
                {SPLIT_RULES &&
                  SPLIT_RULES.map((item, i) => {
                    const flag = [];
                    flag[i] = '否';
                    if (contInfo.crmCustContConfig && contInfo.crmCustContConfig.splitFlag) {
                      contInfo.crmCustContConfig.splitFlag.map(j => {
                        if (j === Number(item.itemCode)) {
                          flag[i] = '是';
                        } else {
                          flag[i] = '否';
                        }
                      });
                    }
                    return (
                      <span key={item.itemCode}>
                        {item.itemName}:{flag[i]}&nbsp;&nbsp;
                      </span>
                    );
                  })}
              </Description>
              {contInfo.serTypeName === '外包' ? (
                <Description term="是否全额">
                  {contInfo.crmCustContConfig.fullyFlag === 1 ? '是' : '否'}
                </Description>
              ) : (
                <span />
              )}
              {contInfo.serTypeName === '外包' ? (
                <Description term="税率">{contInfo.crmCustContConfig.collTax}%</Description>
              ) : (
                <span />
              )}
            </DescriptionList>
            {/* 付款日期设置 */}
            <Divider />
            {contInfo && contInfo.defaultAccoPeriod ? (
              <DescriptionList
                title={
                  <span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                    付款日期设置
                  </span>
                }
              >
                <Description term="默认设置">
                  {contInfo.defaultAccoPeriod && contInfo.selectionTypeName}{' '}
                  {contInfo.defaultAccoPeriod && contInfo.defaultAccoPeriod.accoPeriodDays}日
                </Description>
              </DescriptionList>
            ) : null}
            {/* 垫付设置 */}
            <Divider />
            <DescriptionList
              title={
                <span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                  垫付设置
                </span>
              }
            >
              <Description>
                {CONT_SPOT &&
                  CONT_SPOT.map((item, i) => {
                    const flag = [];
                    flag[i] = '否';
                    if (contInfo.crmCustContConfig && contInfo.crmCustContConfig.paidFlag) {
                      contInfo.crmCustContConfig.paidFlag.map(j => {
                        if (j === Number(item.itemCode)) {
                          flag[i] = '是';
                        } else {
                          flag[i] = '否';
                        }
                      });
                    }
                    return (
                      <span key={item.itemCode}>
                        {item.itemName}:&nbsp;&nbsp;{flag[i]}
                      </span>
                    );
                  })}
              </Description>
            </DescriptionList>
            {/* 特殊要求 */}
            <Divider />
            <DescriptionList
              title={
                <span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                  特殊要求
                </span>
              }
            >
              <Description>
                {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.speReq) || '暂无数据'}
              </Description>
            </DescriptionList>
            {/* 附件 */}
            <div>
              <Divider />
              <Row
                style={{
                  marginBottom: 15,
                  fontSize: 16,
                  color: 'rgba(0,0,0,.85)',
                  fontWeight: 'bold',
                }}
              >
                附件
              </Row>
              <Row style={{ lineHeight: '30px' }}>
                {contInfo && contInfo.listContFileWord && contInfo.listContFileWord.length ? (
                  <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                    <Row style={{ fontWeight: 'bold' }}>合同电子版WORD版</Row>
                    {contInfo.listContFileWord &&
                      contInfo.listContFileWord.map(item => (
                        <Row key={item.contFileId}>
                          <a
                            href={item.fileUrl}
                            download={item.fileName}
                            style={{ textDecoration: 'none' }}
                          >
                            {item.fileName}
                          </a>
                        </Row>
                      ))}
                  </Col>
                ) : null}
                {contInfo && contInfo.listContFilePdf && contInfo.listContFilePdf.length ? (
                  <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                    <Row style={{ fontWeight: 'bold' }}>合同扫描文件PDF版</Row>
                    {contInfo.listContFilePdf &&
                      contInfo.listContFilePdf.map(item => (
                        <Row key={item.contFileId}>
                          <a
                            href={item.fileUrl}
                            download={item.fileName}
                            style={{ textDecoration: 'none' }}
                          >
                            {item.fileName}
                          </a>
                        </Row>
                      ))}
                  </Col>
                ) : null}
                {contInfo && contInfo.listContFileOther && contInfo.listContFileOther.length ? (
                  <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                    <Row style={{ fontWeight: 'bold' }}>其他附件</Row>
                    {contInfo.listContFileOther &&
                      contInfo.listContFileOther.map(item => (
                        <Row key={item.custContFileId}>
                          <a
                            href={item.fileUrl}
                            download={item.fileName}
                            style={{ textDecoration: 'none' }}
                          >
                            {item.fileName}
                          </a>
                        </Row>
                      ))}
                  </Col>
                ) : null}
              </Row>
            </div>
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={() => router.goBack()}>返回</Button>
          </FooterToolbar>
        </PageHeaderWrapper>
      </Spin>
    );
  }
}
export default Details;
